<!DOCTYPE html>

<style>

body {
  zoom: 0.5;
}

div {
  display: inline-block;
  border-radius: 1px;
  background-image: url('data:image/svg+xml,\
    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 10 10" stroke="green" stroke-width="2">\
      <line x1="0" y1="0" x2="10" y2="10"/>\
      <line x1="10" y1="0" x2="0" y2="10"/>\
    </svg>');
}
</style>

<body>
  <div style="width: 50px; height: 50px; background-size: 100px;"></div>
  <div style="width: 50px; height: 50px; background-size: 50px;"></div>
  <div style="width: 50px; height: 50px; background-size: 25px;"></div>
  <br>

  <div style="width: 100px; height: 100px; background-size: 200px;"></div>
  <div style="width: 100px; height: 100px; background-size: 100px;"></div>
  <div style="width: 100px; height: 100px; background-size: 50px;"></div>
  <br>

  <div style="width: 200px; height: 200px; background-size: 400px;"></div>
  <div style="width: 200px; height: 200px; background-size: 200px;"></div>
  <div style="width: 200px; height: 200px; background-size: 100px;"></div>
  <br>

</body>
